<script setup>
import { ref,getCurrentInstance,onMounted } from 'vue'
import { addSupplierApi,querySupplierByIdApi,updateSupplierApi } from '@/api/supplier'
import { queryAllCityApi } from '@/api/city'
import { ElMessage } from 'element-plus'

//获取父组件实例
const instance = getCurrentInstance()

//定义弹出框的数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({supplierName:'',cityCode:'',address:'',linkName:'',linkPhone:''})

//添加或者修改供应商信息
const saveSupplierInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改供应商信息
    result = await updateSupplierApi(dialogData.value)
  }else{
    //添加供应商信息
    result = await addSupplierApi(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    //关闭对话框
    dialogShow.value = false
    //重新加载数据
    instance.emit('search')
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}
//回显供应商信息
const editSupplier = async (id) =>{
  dialogShow.value = true
  const result = await querySupplierByIdApi(id)
  dialogData.value = result.data
}


// 在组件挂载时获取城市数据
onMounted(() => {
  getCityData()
})
// 城市数据
const cityOptions = ref([])
// 获取城市数据
const getCityData = async () => {
  const result = await queryAllCityApi()
  if (result.code) {
    cityOptions.value = result.data
  }
}
// 城市选择器的配置
const cityProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
  emitPath: false
}
// 城市选择变更处理
const handleCityChange = (value) => {
  // 找到选中的城市节点
  const findCity = (cities, id) => {
    for (const city of cities) {
      if (city.id === id) return city
      if (city.children && city.children.length > 0) {
        const found = findCity(city.children, id)
        if (found) return found
      }
    }
    return null
  }
  const selectedCity = findCity(cityOptions.value, value)
  if (selectedCity) {
    // 如果是省级，设置provinceId为自身
    if (selectedCity.level === 1) {
      dialogData.value.provinceId = selectedCity.id
    } 
    // 如果是市级或区级，需要找到其省级ID
    else {
      const findProvinceId = (cities, cityId, parentId) => {
        for (const city of cities) {
          if (city.id === cityId) return parentId
          if (city.children && city.children.length > 0) {
            const found = findProvinceId(city.children, cityId, city.id)
            if (found) return found
          }
        }
        return null
      }
      dialogData.value.provinceId = findProvinceId(cityOptions.value, value, null)
    }
    dialogData.value.cityCode = value
  }
}

defineExpose({
  dialogShow,
  editSupplier
})
</script>
<template>
<!-- 弹出框 -->
  <el-dialog v-model="dialogShow" title="供应商信息" width="500" align-center>
    <el-form :model="dialogData">
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.supplierName" placeholder="供应商名称" />
      </el-form-item>
      <el-form-item label="所在城市" :label-width="formLabelWidth">
        <el-cascader
          v-model="dialogData.cityCode"
          :options="cityOptions"
          :props="cityProps"
          @change="handleCityChange"
          placeholder="请选择所在城市"
          clearable
        />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.address" placeholder="详细地址" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.linkName" placeholder="负责人" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.linkPhone" placeholder="联系方式" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default" plain>取消</el-button>
      <el-button type="primary" @click="saveSupplierInfo" plain>确定</el-button>
    </template>
  </el-dialog>
</template>
<style scoped>
</style>